<template>
	<view class="box">
		<view class="context">
			<!-- 添加诊所 -->
			<form>
				<view class="userName">
					<label>诊所名称</label>
					<!-- <input type="text" :placeholder="userNamePlaceholder" v-model="userName" @blur="userNameBlur" @focus="userNameFocus"> -->
					<input type="text" adjust-position="false" :placeholder="userNamePlaceholder" v-model="userName">
				</view>
				<view class="region">
					<label>地区</label>
					<picker mode="region" @change="bindRegionChange" :value="region">
						<view class="picker">
							{{region[0]}}{{region[1]}}{{region[2]}}
						</view>
					</picker>
				</view>
				<view class="detailedAddress">
					<label>详细地址</label>
					<input type="text" placeholder="请输入" v-model="detailedAddress">
				</view>
				<view class="education">
					<label>诊所简介</label>
					<!-- <textarea v-model="education" placeholder="请输入" /> -->
					<input type="text" v-model="education" placeholder="请输入" />
				</view>

				<view class="clinicmaingraph">
					<view>
						<text>诊所主图(一张)</text>
						<text @click="clinicmaingraph"><text>添加</text>+</text>
					</view>
					<view v-if="clinicmaingraphImg" class="images">
						<image v-for="(item,index) in clinicmaingraphImg" :key="item.id" :src="item" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
					</view>
				</view>

				<view class="picturedetails">
					<view>
						<text>详情图片(最多四张)</text>
						<text @click="picturedetails"><text>添加</text>+</text>
					</view>
					<view v-if="picturedetailsImg" class="images">
						<image v-for="(item,index) in picturedetailsImg" :key="item.id" :src="item" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
					</view>
				</view>

				<view class="licence">
					<view>
						<text>医疗执业许可证(一张)</text>
						<text @click="licence"><text>添加</text>+</text>
					</view>
					<view v-if="licenceImg" class="images">
						<image v-for="(item,index) in licenceImg" :key="item.id" :src="item" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
					</view>
				</view>
				<view class="business">
					<view>
						<text>营业执照(一张)</text>
						<text @click="business"><text>添加</text>+</text>
					</view>
					<view v-if="businessImg" class="images">
						<image v-for="(item,index) in businessImg" :key="item.id" :src="item" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
					</view>
				</view>

				<!-- 联系人 -->
				<text class="contacts">联系人</text>
				<view class="contact">
					<label>联系人</label>
					<input type="text" placeholder="请输入" v-model="contact">
				</view>
				<view class="telnumber">
					<label>手机号</label>
					<input type="text" placeholder="请输入" v-model="telnumber">
				</view>
				<view class="verification">
					<label>验证码</label>
					<input type="text" placeholder="请输入" class="inputs" v-model="code">
					<text class="verificationCode" @click="verificationCode">{{cationCodes}}</text>
				</view>
			</form>

			<view class="add" @click="getShopMessageS">
				<text>添加</text>
			</view>
		</view>
	</view>
</template>

<script>
	import regionPicker from "@/components/region-picker/region-picker.vue"
	export default {
		components: {
			regionPicker
		},
		onLoad() {
			this.uploadOosMethos();
		},
		data() {
			return {
				cationCodes: "验证码",
				userName: null,
				licenceImg: null,
				clinicmaingraphImg: null,
				picturedetailsImg: null,
				businessImg: null,
				region: ['浙江省', '杭州市', '滨江区'],
				customItem: '全部',
				detailedAddress: null,
				education: null,
				contact: null,
				telnumber: null,
				code: null,

				image_url: "",
				img_url: [],
				licence_url: null,
				trading_url: null,

				// 验证码
				codes: null,

				// input的Placeholder
				userNamePlaceholder: "诊所名称",


				// 上传的图片设置
				host: null,
				OSSAccessKeyId: null,
				dir: null,
				policy: null,
				signature: null,
			};
		},
		methods: {
			// 获取oos的地址
			async uploadOosMethos() {
				let fileGetUrl = await this.$myrequest({
					url: `File/get`
				});
				this.host = fileGetUrl.data.data.host;
				this.OSSAccessKeyId = fileGetUrl.data.data.accessid;
				this.dir = fileGetUrl.data.data.dir;
				this.policy = fileGetUrl.data.data.policy;
				this.signature = fileGetUrl.data.data.signature;
			},

			// 获取焦点时input
			userNameFocus() {
				this.userNamePlaceholder = "";
			},
			userNameBlur() {
				this.userNamePlaceholder = "诊所名称";
			},
			// 获取焦点时input


			// 地区选择器
			bindRegionChange(e) {
				this.region = e.detail.value
			},
			async verificationCode() {
				if (!this.telnumber) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return false;
				};

				if (!(/^1[3456789]\d{9}$/.test(this.telnumber))) {
					uni.showToast({
						title: "手机号输入错误",
						icon: "none"
					});
					return false;
				};

				let res = await this.$myrequest({
					url: "User/sendSms",
					method: "POST",
					data: {
						mobile: this.telnumber
					}
				});
				console.log(res);
				if (res.data.code == 200) {
					let timeOut = 60;
					let setId = setInterval(() => {
						timeOut = --timeOut;
						this.cationCodes = `已发送${timeOut}s`;
						if (timeOut == 0) {
							this.cationCodes = "验证码";
							clearInterval(setId);
						};
					}, 1 * 1000);
				};
			},

			// ==诊所主图==
			async clinicmaingraph() {
				let self = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						this.clinicmaingraphImg = res.tempFilePaths;

						let fileName = `${Date.now()}${res.tempFilePaths[0].substr(-4)}`;
						let key = `${self.dir}${fileName}`;
						self.image_url = `${self.host}/${self.dir}${fileName}`;

						uni.uploadFile({
							url: self.host,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								key,
								policy: self.policy,
								OSSAccessKeyId: this.OSSAccessKeyId,
								signature: this.signature
							},
							success: res => {
								// self.image_url = JSON.parse(uploadFileRes.data).msg;
								console.log(`诊所主图添加成功了`);
							}
						});

					}
				});
			},
			// --诊所主图--

			// ==详情图片==
			async picturedetails() {
				let self = this;
				uni.chooseImage({
					count: 4,
					success: res => {
						this.picturedetailsImg = res.tempFilePaths;

						for (let [keys, value] of Object.entries(res.tempFilePaths)) {

							let fileName = `${Date.now()+1}${value.substr(-4)}`;
							let key = `${self.dir}${fileName}`;
							self.img_url.push(`${self.host}/${self.dir}${fileName}`);

							uni.uploadFile({
								url: self.host,
								filePath: value,
								name: 'file',
								formData: {
									key,
									policy: self.policy,
									OSSAccessKeyId: this.OSSAccessKeyId,
									signature: this.signature
								},
								success: (uploadFileRes) => {
									// self.img_url.push(JSON.parse(uploadFileRes.data).msg);
									console.log(`详情图上传成功了`);
								}
							});

						};
					},
				});
			},
			// --详情图片--

			// ==医生许可证==
			async licence() {
				let self = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						this.licenceImg = res.tempFilePaths;

						let fileName = `${Date.now()}${res.tempFilePaths[0].substr(-4)}`;
						let key = `${self.dir}${fileName}`;

						self.licence_url = `${self.host}/${self.dir}${fileName}`;

						uni.uploadFile({
							url: self.host,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								key,
								policy: self.policy,
								OSSAccessKeyId: this.OSSAccessKeyId,
								signature: this.signature
							},
							success: res => {
								// self.licence_url = JSON.parse(uploadFileRes.data).msg;
								console.log(`医生许可证添加了吧`);
							}
						});
					}
				});
			},
			// --医生许可证--

			// ==营业执照==
			async business() {
				let self = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						this.businessImg = res.tempFilePaths;

						let fileName = `${Date.now()}${res.tempFilePaths[0].substr(-4)}`;
						let key = `${self.dir}${fileName}`;

						self.trading_url = `${self.host}/${self.dir}${fileName}`;

						uni.uploadFile({
							url: self.host,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								key,
								policy: self.policy,
								OSSAccessKeyId: this.OSSAccessKeyId,
								signature: this.signature
							},
							success: (uploadFileRes) => {
								// self.trading_url = JSON.parse(uploadFileRes.data).msg;
								console.log(`营业执照`)
							}
						});
					}
				});
			},
			// --营业执照--

			// 添加
			getShopMessageS() {
				if (this.userName === null) {
					uni.showToast({
						title: "诊所名称必填",
						icon: "none"
					})
					return false;
				};
				if (this.detailedAddress === null) {
					uni.showToast({
						title: "详细地址必填",
						icon: "none"
					})
					return false;
				};
				if (this.education === null) {
					uni.showToast({
						title: "诊所简介必填",
						icon: "none"
					})
					return false;
				};
				if (this.clinicmaingraphImg === null || this.clinicmaingraphImg == "") {
					uni.showToast({
						title: "诊所主图必填",
						icon: "none"
					})
					return false;
				};

				if (this.picturedetailsImg === null || this.picturedetailsImg.length == 0) {
					uni.showToast({
						title: "详细图片必填",
						icon: "none"
					})
					return false;
				};
				if (this.licenceImg === null) {
					uni.showToast({
						title: "医疗职业许可证必填",
						icon: "none"
					})
					return false;
				};
				if (this.businessImg === null) {
					uni.showToast({
						title: "营业职照必填",
						icon: "none"
					})
					return false;
				};
				if (this.contact === null) {
					uni.showToast({
						title: "联系人必填",
						icon: "none"
					})
					return false;
				};
				if (this.telnumber === null) {
					uni.showToast({
						title: "手机号必填",
						icon: "none"
					})
					return false;
				};

				if (this.clinicmaingraphImg !== null && this.businessImg !== null && this.licenceImg !== null && this.picturedetailsImg !==
					null) {
					let timeOut = 3;
					uni.showToast({
						title: "图片上传中",
						icon: "none",
						duration: timeOut * 1000
					})
					let setId = setInterval(() => {
						timeOut = --timeOut;
						if (timeOut == 0) {
							this.getShopMessage();
							clearInterval(setId);
						};
					}, 1 * 1000);
				};

			},
			async getShopMessage() {
				let openids = this.$store.state.openid;
				let resdatas = JSON.stringify({
					title: this.userName,
					area: this.region.join(","),
					address: this.detailedAddress,
					content: this.education,
					image_url: this.img_url.toString(),
					img_url: this.image_url,
					licence_url: this.licence_url,
					trading_url: this.trading_url,
					user_name: this.contact,
					user_phone: this.telnumber,
					code: this.code
				});

				let res = await this.$myrequest({
					url: "Service/getShopMessage",
					method: "POST",
					data: {
						openid: openids,
						resdata: resdatas
					}
				});

				if (res.data.msg == "验证码错误") {
					uni.showToast({
						title: "验证码错误",
						icon: "none"
					});
					return false;
				};

				if (res.data.msg == "验证码失效") {
					uni.showToast({
						title: "验证码失效",
						icon: "none"
					});
					return false;
				};

				if (res.data.code == 200) {
					this.$store.commit("storePersonalInformation", res.data.data);
					this.$store.commit("storeClinicId", res.data.data);
					uni.switchTab({
						url: "../homePage3/homePage3"
					})
				};
			},
		}
	}
</script>

<style lang="scss">
	.context {

		form {
			width: 750rpx;
			display: block;
			overflow: hidden;
			margin-bottom: 30rpx;

			.userName,
			.region,
			.detailedAddress,
			.contact,
			.telnumber,
			.verification {
				width: calc(100vw - 60rpx);
				height: 100rpx;
				background-color: rgba(247, 248, 252, 1);
				margin: 20rpx auto;
				border-radius: 10rpx;
				padding-left: 20rpx;
				@include shuipingchuijuzhong;

				label {
					flex: 1;
				}

				>input {
					flex: 1;
					padding-right: 30rpx;
					text-align: right;
				}

				.inputs {
					padding-right: 0rpx !important;
				}
			}
		}

		.contacts {
			display: inline-block;
			color: RGBA(173, 173, 173, 1);
			padding-left: 60rpx;
			margin: 10rpx 0;
		}

		.verificationCode {
			display: inline-block;
			width: 180rpx;
			height: 75rpx;
			line-height: 75rpx;
			text-align: center;
			background-color: rgba(255, 255, 255, 1);
			color: rgba(51, 211, 190, 1);
			padding: 0 10rpx;
			box-sizing: border-box;
			margin-left: 20rpx;
			margin-right: 30rpx;
			border-radius: 50rpx;
		}

		.licence,
		.clinicmaingraph,
		.doorPhoto,
		.picturedetails,
		.business {
			width: calc(100vw - 60rpx);
			margin: 20rpx auto;
			border-radius: 10rpx;

			>view {
				&:first-of-type {
					border-radius: 10rpx;
					height: 100rpx;
					background-color: rgba(247, 248, 252, 1);
					padding: 20rpx;
					@include chuizhilianduan;
				}
			}

			.images {
				background-color: rgba(247, 248, 252, 1);
				border-radius: 0 0 10rpx 10rpx;

				image {
					margin-left: 20rpx;
				}
			}
		}
	}

	.add {
		background: linear-gradient(90deg, rgba(96, 232, 205, 1), rgba(45, 209, 188, 1));
		border-radius: 49px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		width: 687rpx;
		height: 98rpx;
		margin-bottom: 30rpx;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.picker {
		padding-right: 30rpx;
	}

	.education {
		width: calc(100vw - 60rpx);
		height: 160rpx;
		background-color: rgba(247, 248, 252, 1);
		margin: 20rpx auto;
		border-radius: 10rpx;
		padding-left: 20rpx;
		@include shuipingchuijuzhong;
		flex-wrap: wrap;

		label {
			display: inline-block;
			width: 100%;
		}

		>input {
			height: 100rpx;
			width: 100%;
		}
	}
</style>
